<template>
  <div
    class="el-breadcrumb"
    aria-label="Breadcrumb"
    role="navigation"
  >
    <slot></slot>
  </div>
</template>
<script>
export default {
  name: "ElBreadcrumb",

  props: {
    separator: {
      type: String,
      default: "/"
    },
    separatorClass: {
      type: String,
      default: ""
    }
  },

  provide() {
    return {
      elBreadcrumb: this
    };
  },

  mounted() {
    const items = this.$el.querySelectorAll(".el-breadcrumb__item");
    if (items.length) {
      items[items.length - 1].setAttribute("aria-current", "page");
    }
  }
};
</script>
<style lang="less" scoped>
.el-breadcrumb {
  display: flex;
  align-items: center;
}
</style>
